<template>
  <div class="sign_color">
    <p>color:</p>
    <ul class="sign_color_box">
      <li
        v-for="(item, index) in colorList"
        :key="index"
        :class="{ active_color: selectColor === item }"
        @click="handleClick(item)"
      >
        <span :style="{ backgroundColor: item }"></span>
      </li>
    </ul>
  </div>
</template>
<script setup>
const props = defineProps({
  colorList: {
    type: Array,
    default() {
      return ['#303133', '#CA444A', '#3979F6', '#53A451'];
    },
  },
});

const selectColor = ref(props.colorList[0] || '#303133');

const emits = defineEmits(['changeColor']);

function handleClick(item) {
  selectColor.value = item;
  emits('changeColor', selectColor.value);
}

defineExpose({
  selectColor,
});
</script>

<style lang="scss" scoped>
.sign_color,
.sign_color_box {
  display: flex;
  align-items: center;
}
.sign_color {
  margin-top: 15px;
  p {
    margin-right: 10px;
    height: 24px;
    line-height: 24px;
  }
}
.sign_color_box {
  list-style: none;
  li {
    margin-right: 6px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: #fff;
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    span {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 8px;
      position: absolute;
      top: 2px;
      left: 2px;
    }
  }
  .active_color {
    border: 2px solid var(--el-color-primary);
  }
}
</style>
